<template>
  <!-- 首页 -->
  <div class='Page-wrap home'>
    <HeadBar></HeadBar>
    <div class="content-wrap" id="home">
      <!-- banner -->
      <div class="banner-wrap">
        <div class="banner-content font-banner-text">
          <div id="ani-0" class="animation-fadeIn">基于腾讯云小程序云开发平台开发</div>
          <div id="ani-1" class="animation-fadeIn" style="--delay: .1s">街舞机构数字化增长</div>
          <div id="ani-2" class="animation-fadeIn" style="--delay: .2s">SaaS解决方案</div>
          <div class="banner-btn font-text-details" style="--delay: .8s">
            <span>免费试用</span>
            <img src="@/assets/images/icon-right.png">
          </div>
        </div>
      </div>

      <!-- 介绍 -->
      <div class="profile" id="profile">
        <div class="company">
          <div class="left-img">
            <img class="company-img1" :src="getImg(companyInformation?.companyIntro?.imgOne)">
            <img class="company-img2" :src="getImg(companyInformation?.companyIntro?.imgTwo)">
          </div>
          <div class="right-content">
            <div class="content-title font-nav-list">{{ companyInformation?.headline }}</div>
            <div id="ani-3" class="company-name animation-fadeIn font-nav-list">{{ companyInformation?.companyIntro?.title
            }}</div>
            <div id="ani-4" class="company-info animation-fadeIn  font-text-details">{{
              companyInformation?.companyIntro?.content }}</div>
          </div>
        </div>
        <div class="data-number">
          <div class="number-item" v-for="item in businessData" :key="item.id">
            <div class="number">
              <span class="number-text font-banner-text ">{{ item.data }}</span>
              <span class="number-unit">+个</span>
            </div>
            <div class="data-title font-text-tip">{{ item.dataName || '数据标题' }}</div>
          </div>
        </div>
        <div id="ani-5" class="company-details animation-fadeIn font-text-details">{{ businessIntro.intro }}</div>
        <div class="address">
          <!-- <div class="address-tips">我们在全国分布的有以下这些地方：</div> -->
          <img id="ani-6" class="address-img animation-fadeIn" :src="getImg(businessIntro.imgUrl)">
        </div>
      </div>

      <!-- 产品 -->
      <div class="product" id="product">
        <div class="title">核心产品</div>
        <div class="swiper-productImg">
          <img class="product-img" :src="getImg(productList[productNavIndex].imgUrl)">
        </div>
        <div class="product-main">
          <div class="product-nav">
            <div :class="['nav-item', productNavIndex === index ? 'item-nav-check' : '']" @click="productNavIndex = index"
              v-for="item, index in productList" :key="item">{{ item.productName }}</div>
          </div>
          <!-- TODO 富文本待联调 -->
          <div v-html="productList[productNavIndex].intro"></div>
        </div>
      </div>

      <div class="cooperative-client">
        <!-- 合作客户 -->
        <div class="title" id="cooperative">{{ cooperationPlatform[0].typeName }}</div>
        <div class="animation-box">
          <div class="client-imgs">
            <img class="client-img circulate-animation" style="animation-delay: -20s;"
              :src="getImg(cooperationPlatform[0].cooperationList[0].imgUrl)">
            <img class="client-img circulate-animation" style="animation-delay: 0s;" :src="getImg(cooperationPlatform[0].cooperationList[0].imgUrl)">
          </div>
          <div class="inset-shadow">
          </div>
        </div>
        <!-- 战略合作 -->
        <div class="title" id="cooperate">{{ cooperationPlatform[1].typeName }}</div>
        <div class="cooperate">
          <div class="cooperate-item" v-for="item in cooperationPlatform[1].cooperationList">
            <img class="cooperate-img" :src="getImg(item.imgUrl)" />
          </div>
        </div>
        <!-- 发展历程|公司动态 -->
        <div class="title" id="history">发展历程</div>
        <div class="history">
          <div class="time-list font-nav-list">
            <div :class="['item-time', defineComponentIndex === index ? 'time-item-check' : '']"
              @click="defineComponentIndex = index" v-for="item, index in developmentCourse" :key="index">
              {{ item.milestone }}
            </div>
          </div>
        </div>

        <!-- 轮播图 -->
        <div class="history-banner">
          <div class="wrap">
            <swiper :modules="[Autoplay, Navigation, A11y]" :navigation="navigation" :loop="true" class="my-swiper"
              :autoplay="{ delay: 3000 }">
              <SwiperSlide v-for="item in developmentCourse[defineComponentIndex]?.developmentList" :key="item.id">
                <div class="swiper-item" @click="jumpPath(item.link)">
                  <img class="history-img" :src="getImg(item.imgUrl)" />
                  <div class="history-content">
                    <div class="history-title Text-hidden-multiple font-nav-list" style="--text-multiple: 4">
                      {{ item.title }}
                    </div>
                    <div class="history-time font-text-details">{{ item.publishTime }}</div>
                  </div>
                </div>
              </SwiperSlide>
              <div class="swiper-prev" @click.stop="prevEl(item, index)">
                <img src="@/assets/images/jt-left.png" class="jt">
              </div>
              <div class="swiper-next" @click.stop="nextEl">
                <img src="@/assets/images/jt-left.png" class="jt">
              </div>
            </swiper>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
 
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation, A11y } from 'swiper/modules';
import { useRouter } from 'vue-router';
import 'swiper/css/navigation' // 轮播图两边的左右箭头
import { useRequestData } from '@/hooks/requestPageData';
import {
  getCompanyIntro, getBusinessData, getBusinessIntro,
  getCooperationPlatform, getProductList, getDevelopmentCourse
} from '@/api/home.js';
import getImg from '@/utils/getImg.js';
import scrollDisplayFn from '@/utils/scrollDisplay.js';
const { getRequestData, isEqualFn } = useRequestData();

const router = useRouter();              // 路由
const navigation = ref({
  nextEl: ".swiper-next",
  prevEl: ".swiper-prev",
});
const companyInformation = ref({});      // 公司简介
const businessData = ref({});            // 业务数据
const businessIntro = ref({});           // 业务介绍
const cooperationPlatform = ref([]);     // 合作平台+战略合作
const productList = ref([]);             // 产品列表
const productNavIndex = ref(0);          // 产品导航索引
const developmentCourse = ref([]);       // 发展历程
const defineComponentIndex = ref(0);     // 发展历程下标
// 函数方法声明↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
// 请求banner数据
const prevEl = (item, index) => {
  // console.log('上一张' + index + item)
};
const nextEl = () => {
  // console.log('下一张')
};

const scrollDisplay = ref(null);

onMounted(() => {
  // const elScrollPreview = [];            // 需要滚动预览的元素数组id  通过display控制 + animation初始动画
  const elScrollPreviewNumber = 7;          // 预览数量
  scrollDisplay.value = new scrollDisplayFn(new Array(elScrollPreviewNumber).fill().map((item, index) => `ani-${index}`));
})

onBeforeUnmount(() => {
  scrollDisplay.value.closeRollMonitor(); // 移除滚动监听
})


// 获取公司简介
getRequestData(companyInformation, 'companyInformation', () => {
  getCompanyIntro().then(res => {
    const data = res.result;
    if (isEqualFn('companyInformation', data)) companyInformation.value = data;
  })
})

// 获取公司业务数据
getRequestData(businessData, 'businessData', () => {
  getBusinessData().then(res => {
    const data = res.result;
    if (isEqualFn('businessData', data)) businessData.value = data;
  })
})

// 获取公司业务介绍
getRequestData(businessIntro, 'businessIntro', () => {
  getBusinessIntro().then(res => {
    const data = res.result;
    if (isEqualFn('businessIntro', data)) businessIntro.value = data;
  })
})

// 获取公司业务介绍- 放心学
getRequestData(productList, 'productList', () => {
  getProductList().then(res => {
    const data = res.result;
    if (isEqualFn('productList', data)) productList.value = data;
  })
})

// 获取合作平台
getRequestData(cooperationPlatform, 'cooperationPlatform', () => {
  getCooperationPlatform().then(res => {
    const data = res.result;
    if (isEqualFn('cooperationPlatform', data)) cooperationPlatform.value = data;
  })
})

// 获取合作平台
getRequestData(developmentCourse, 'developmentCourse', () => {
  getDevelopmentCourse().then(res => {
    const data = res.result;
    if (isEqualFn('developmentCourse', data)) developmentCourse.value = data;
  })
})

// 跳转页面
function jumpPath(url) {
  window.open(url, '_blank');
  // window.location.href = url;
}
// 跳转页面
function jumpPage(url) {
  router.push({ path: url })
}


</script>
 
<style lang='scss' scoped>
.home {
  // width: 100vw;
  // height: 100vh;

  .content-wrap {
    width: 100%;
    color: #fff;

    .title {
      font-size: 72px;
      text-align: center;
      font-weight: bold;
      margin: 100px auto;
      font-family: 'nav-list';
    }

    &>div {
      &>div {
        padding: 0 30px !important;
        width: 1300px;
        margin: 0 auto;
      }
    }

    .banner-wrap {
      width: 100%;
      margin-top: -60px;
      height: 100vh;
      // background-color: #030303;
      background: url('../../assets/images/banner-background.png') no-repeat 100% 100% / cover;
      display: flex;
      align-items: center;

      .banner-content {
        margin-top: 40px; // TODO 适配顶部高度缺失
        font-size: 82px;
        line-height: 102px;
        font-weight: bold;

        .banner-btn {
          width: 301px;
          height: 96px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #FE690D;
          border-radius: 12px;
          font-size: 48px;
          cursor: pointer;
          // transform: all .3s;
          margin-top: 66px;

          &:hover {
            span {
              border-bottom: 2px solid #fff;
            }
          }

          span {
            display: block;
            line-height: 60px;
            border-bottom: 1px solid #00000000;
          }

          img {
            width: 40px;
            height: 40px;
            margin: 6px 0 0 16px;
          }
        }
      }
    }

    .profile {
      min-height: 1800px;
      overflow: hidden;
      color: #030303;
      background-color: #F0F0F0;

      .company {
        min-height: 600px;
        display: flex;
        justify-content: center;
        margin-top: 110px;

        .left-img {
          position: relative;

          .company-img1 {
            width: 480px;
            height: 344px;
            object-fit: cover;
          }

          .company-img2 {
            position: absolute;
            left: 110px;
            top: 252px;
            width: 460px;
            height: 330px;
            object-fit: cover;
          }
        }

        .right-content {
          width: 554px;
          margin-left: 154px;

          .content-title {
            margin: 20px 0 40px;
            font-size: 40px;
          }

          .company-name {
            margin-bottom: 40px;
            font-size: 24px;
          }

          .company-info {
            color: #5d5d5d;
            // font-size: 16px;
            line-height: 32px;
          }
        }
      }

      .data-number {
        box-sizing: border-box;
        margin-top: 64px;
        display: flex;
        justify-content: space-around;

        .number-item {

          .number {
            .number-unit {
              font-size: 18px;
              color: #E89224;
            }

            .number-text {
              color: #FF6100;
              font-size: 92px;
              font-weight: bold;
              font-style: italic;
            }
          }

          .data-title {
            margin-top: 20px;
            font-size: 36px;
            color: #4A4A4A;
            text-align: center;
          }
        }
      }

      .company-details {
        margin: 64px auto;
        font-size: 36px;
        color: #646464;
        line-height: 56px;
        text-align: center;
      }

      .address {
        margin-bottom: 68px;

        .address-tips {
          margin: 68px 0;
          text-align: center;
          color: #383838;
          font-size: 40px;
        }

        .address-img {
          display: block;
          margin: 0 auto;
          width: 1180px;
        }
      }
    }

    .product {
      background-color: #1D1C1C;
      min-height: 1000px;
      padding-bottom: 50px;
      overflow: hidden;

      .swiper-productImg {
        .product-img {
          width: 100%;
          height: 520px;
          object-fit: cover;
        }
      }

      .product-main {
        width: 1188px;
        margin-top: 38px;

        .product-nav {
          font-size: 24px;
          display: flex;
          justify-content: space-around;
          border-bottom: 1px solid rgba(255, 255, 255, 0.55);
          margin-bottom: 40px;

          .nav-item {
            padding: 18px 0;
            position: relative;
            cursor: pointer;
            transition: all 0.3s;
          }

          .item-nav-check {
            color: #FF6100;

            &::before {
              content: "";
              position: absolute;
              width: 50%;
              bottom: -2px;
              left: 50%;
              height: 4px;
              background-color: #FF6100;
              transform: translateX(-50%);
              animation: border-fide .5s both;
            }

            @keyframes border-fide {
              0% {
                background-color: #ff620052;
                height: 4px;
                width: 50%;
                transform: translateY(-300%) translateX(-50%);
              }

              100% {
                background-color: #FF6100;
                height: 3px;
                width: 100%;
                transform: translateY(0) translateX(-50%);
              }
            }
          }
        }

        .jam-box {
          margin-top: 40px;
          display: flex;
          justify-content: space-between;

          .jam-item {
            width: 358px;
            cursor: pointer;
            transition: all 0.3s;

            .jam-img {
              width: 100%;
              height: 410px;
              object-fit: cover;
              border-radius: 6px;
            }

            .jam-info {
              padding: 0 6px 6px 20px;

              .jam-title {
                font-size: 24px;
                // font-weight: bold;
                margin: 56px 0 36px;
              }

              .jam-tip {
                width: 78px;
                height: 6px;
                background: #FF6100;
              }
            }

            &:hover {
              box-shadow: 0 0 10px #252525;

              .jam-tip {
                animation: lang .5s both 2 alternate;
              }

              @keyframes lang {
                0% {
                  width: 78px;
                }

                100% {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }

    .cooperative-client {
      overflow: hidden;
      background-color: #FCFCFC;
      min-height: 800px;
      padding-bottom: 114px;

      .title {
        color: #030303;
      }

      .animation-box {
        width: 90%;
        position: relative;

        .client-imgs {
          white-space: nowrap;
          aspect-ratio: 1728 / 500;
          // height: 440px;
          overflow: hidden;
          position: relative;

          .client-img {
            position: absolute;
            // width: 100%;
            width: auto;
            object-fit: cover;
            top: 0;
            left: 0;
            height: 100%;
            min-width: 100%;
          }
        }

        .inset-shadow {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          box-shadow: inset 120px 0 60px -15px #FCFCFC,
            inset -120px 0 60px -15px #FCFCFC;
        }

        .circulate-animation {
          animation: imgCirculate 40s infinite linear both;
        }

        // 循环轮播滚动
        @keyframes imgCirculate {
          0% {
            transform: translateX(100%);
          }
          100% {
            transform: translateX(-100%);
          }
        }
      }

      .cooperate {
        display: flex;
        justify-content: center;

        .cooperate-item {
          margin: 0 52px;
          width: 542px;
          height: 332px;
          background: #FFFFFF;
          box-shadow: 0px 8px 16px 0px rgba(80, 80, 80, 0.1), 0px -8px 24px 0px rgba(80, 80, 80, 0.09);
          border-radius: 24px;
          display: flex;
          align-items: center;
          justify-content: center;

          .cooperate-img {
            width: 387px;
          }
        }
      }

      .history {
        margin-bottom: 90px;
        color: #8C8C8C;

        .time-list {
          height: 70px;
          align-items: center;
          justify-content: space-around;
          display: flex;
          border-bottom: 1px solid #D0D0D0;
          box-shadow: inset 0 -10px 10px -10px #b8b8b8;

          .item-time {
            width: 140px;
            text-align: center;
            height: 70px;
            line-height: 70px;
            position: relative;
            color: #8C8C8C;
            font-size: 22px;
            transition: all .2s;
            cursor: pointer;
          }

          .time-item-check {
            color: #FF6100;
            font-size: 30px;
            font-weight: bold;

            &::after {
              content: "";
              width: 12px;
              height: 12px;
              position: absolute;
              left: 50%;
              border-radius: 50%;
              bottom: 0;
              transform-origin: center center;
              transform: scale(0) translate(-50%, 50%);
              animation: scale .3s linear both;
              background-color: #FF6100;
            }
          }

          @keyframes scale {
            0% {
              width: 0;
              height: 0;
              transform: translate(-50%, 50%);
            }

            70% {
              width: 14px;
              height: 14px;
              transform: translate(-50%, 50%);
            }

            100% {
              width: 12px;
              height: 12px;
              transform: translate(-50%, 50%);
            }
          }
        }
      }
    }

    .history-banner {
      // height: 320px;
      color: #030303;

      .wrap {
        height: 100%;

        .my-swiper {
          height: 100%;
          position: relative;

          .swiper-next,
          .swiper-prev {
            position: absolute;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            background-color: #030303;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background-color: #DFDFDF;
            transition: all .5s;
            transform-origin: center;

            &:hover {
              transform: translateY(-50%) scale(1.1);
              background-color: #bdbcbc;
            }

            .jt {
              width: 36px;
              height: 36px;
              transform: translateX(-2px);
            }
          }

          .swiper-prev {
            left: 20px;
          }

          .swiper-next {
            right: 20px;

            .jt {
              transform: rotate(180deg) translateX(-2px);
            }
          }

          .swiper-item {
            display: flex;
            padding: 0 100px;

            .history-img {
              width: 521px;
              height: 229px;
              box-shadow: 2px 6px 12px 0px rgba(76, 76, 76, 0.2);
              border-radius: 12px;
              display: block;
              flex-shrink: 0;
            }

            .history-content {
              padding-left: 35px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .history-title {
                font-size: 32px;
                line-height: 44px;
              }

              .history-time {
                margin-top: auto;
                line-height: 38px;
              }
            }
          }
        }
      }
    }

    // 底部渐出
    .animation-fadeIn {
      opacity: 0;
      transition: all .5s;
      transition-delay: var(--delay);
      // animation: fadeIn .3s both;
      // animation-delay: var(--delay);
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
        transform: translateY(30%);
      }

      80% {
        opacity: 1;
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}
</style>